<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,body {
						height: 100%;
						margin: 0px;
						font-family:PingFang-SC-Medium;
						padding: 0px;
					}
			
			
			.mui-content{
				position: relative;
				float: left;
				width: 100%;
				padding-bottom: 40px;
			}
	        .titledd{
				position: relative;
				float: left;
               margin-top: 230px;	
			   width: 100%;
			   height: 30px;
				text-align: center;
				font-size:16px;
	          font-weight:normal;
	          color:rgba(255,227,12,1);	
			}			
			.draw{
				position: relative;
				float: left;
				width:100%;
				height:350px;
				margin-top: 20px;
				padding-left: calc((100% - 348px)/2);
			}
			
			.luckdraw{
				width: 348px;
				height: 350px;
				padding-top: 20px;
				box-sizing: border-box;
				padding-left: 26px;
			}
			
			.nei{
			    width: 293px;
				height: 293px;
				position: relative;
			}
			.nei>div{
				position: absolute;
				width: 93px;
				height: 88px;
				margin-left: 4px;
                margin-top: 10px;
			}
			
			.nei>div>div:nth-child(1){
				position: relative;
				float: left;
				width: 100%;
				height: 63px;
				padding-top: 9px;
				text-align: center;
			}
			.nei>div>div:nth-child(1)>img{
				width: 66px;
				height: 54px;
			}
			
			.nei>div>div:nth-child(2){
				position: relative;
				float: left;
				width: 100%;
				height: 25px;
				text-align: center;
				line-height: 25px;
				font-size:11px;
                font-weight:400;
                color:rgba(127,62,62,1);
				overflow: hidden;
			}
			.nei>div>p:nth-child(1){
					width: 46px;
					height: 43px;
					line-break: 20px;
					line-height: 20px;
					letter-spacing: 3px;
					margin: auto;
					font-weight: bold;
					font-size: 18px;
					color: #FE3800;
					margin-top: 12px;
					padding-left: 2px;
			}
			.nei>div>p:nth-child(2){
				position: relative;
				width: 100%;
				height: 25px;
				text-align: center;
				font-size:13px;
                font-weight:bold;
                color:rgba(254,56,0,1);
                line-height:25px;
				overflow: hidden;
			}
			.nei >div:nth-child(1){
			    left: 0;
			    top: 0;
			}
	 	.nei >div:nth-child(2){
			    left: 97px;
			    top: 0;
			}
			.nei >div:nth-child(3){
			    left: 194px;
			    top: 0;
			}
			.nei> div:nth-child(4){
			    left: 194px;
			    top: 98px;
			}
			.nei >div:nth-child(5){
		        left: 194px;
			    top: 196px;
			}
			.nei >div:nth-child(6){
			    left: 97px;
			    top: 196px;
			}
			.nei> div:nth-child(7){
			    left: 0px;
			    top: 196px;
			}
			.nei >div:nth-child(8){
			    left: 0;
			    top: 96px;
			}
			.nei >div:nth-child(9){
			    left: 97px;
			    top: 98px;
			} 
		
			
			/* 轮播 */
			
	.lunbos{
				position: relative;
				float: left;
				display: inline-block;
				width: 100%;
				height: 54px;
				margin-top: 40px;
			}
			
			
.headline {
padding: 0px 15px;
box-sizing: border-box;
height: 54px;

overflow: hidden;

}

.headline .left {

float: left;

padding: 0 10px;

width: 20%;

height: 52px;

overflow: hidden;

}

.headline .left img {

width: 100%;

}

.headline .right {
padding: 0  15px;
width: 100%;
line-height: 25px;
font-size: 14px;
overflow: hidden;
}

.headline .right>div{
width: 100%;
height: 52px;
}

.tii{
	position: relative;
	float: left;
	width: 100%;
    height: 25px;
}
.tii>span:nth-child(1){
	position: relative;
	float: left;
	width: 40%;
	overflow: hidden;
	margin-left: 5%;
	color: #FFFFFF;
	white-space: nowrap;
}

.tii>span:nth-child(2){
	position: relative;
	float: left;
	width: 48%;
	margin-left: 2%;
	color: #FFFFFF;
	overflow: hidden;
	white-space: nowrap;
}

.tips{
	position: relative;
	float: left;
	margin-top: 30px;
	width: 100%;
	text-align: center;
}

.tips>div{
	width: 343px;
    margin: auto;
	display: inline-block;
}
.tiphead{
	position: relative;
	float: left;
	width: 100%;
	height: 32px;
	border: 1px  solid rgba(255, 255, 255, 0.5);
	background:rgba(253,243,171,0.5);
}
.tiphead>div{
	width: 30%;
	position: relative;
	float: left;
	text-align: center;
	line-height: 32px;
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	height: 100%;
	box-sizing: border-box;
	font-size:15px;
font-weight:bold;
color:rgba(255,255,255,1);
padding: 0  10px;
box-sizing: border-box;
overflow: hidden;
}
.tiphead>div:nth-child(1){
  width: 40%;	
}
.tiphead>div:last-child{
  border: none;	
}

.tipheads{
		position: relative;
	float: left;
	width: 100%;
	height: 32px;
	border-left: 1px  solid rgba(255, 255, 255, 0.5);
	border-right: 1px  solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px  solid rgba(255, 255, 255, 0.5);
}

.tipheads>div{
	    width: 30%;
		position: relative;
		float: left;
		text-align: center;
		line-height: 32px;
		border-right: 1px solid rgba(255, 255, 255, 0.5);
		height: 100%;
		box-sizing: border-box;
		font-size:15px;
	font-weight:bold;
	color:rgba(255,255,255,1);
	padding: 0  10px;
	box-sizing: border-box;
	overflow: hidden;
}
.tipheads>div:nth-child(1){
  width: 40%;	
}

.tipheads>div:last-child{
  border: none;	
}
.spand{
	width: 75px;
	height: 25px;
	display: inline-block;
	background: rgba(191,191,191,1);
	box-sizing: border-box;
	color: #FFFFFF;
	line-height: 25px;
	overflow: hidden;
	margin-top: 3px;
}

.spans{
	background: #FFED7F;
	box-sizing: border-box;
	color: #FF302D;
	position: relative;
		line-height: 25px;
	width: 75px;
		margin-top: 3px;
	display: inline-block;
	overflow: hidden;
}
.drawsss{
	position: relative;
	float: left;
	width: 100%;
	padding: 0 60px;
	height: 39px;
	box-sizing: border-box;
	margin-top: 30px;
}
.drawsss>div{
	position: relative;
	float: left;
	width: 100%;
	height:39px ;
	text-align: center;
	line-height: 30px;
	font-size:15px;
font-weight:normal;
color:rgba(246,55,63,1);
padding: 0 35px;
box-sizing: border-box;
overflow: hidden;
}
.active{
	background: rgba(251,91,90,0.6);
}
a{
	color: ;
	
}

.mui-bar{
	background: red;
}
a{
	color: #FFFFFF;
}
a:active{
	color: #FFFFFF;
}
.mui-title{
	color: #FFFFFF;
}
	</style>
	</head>
	<body>
		<div class="mui-content" style="background-image: url(../image/draws.png);;background-size: 100% 100%;background-repeat: no-repeat;"
		 id="content">
		 <<header class="mui-bar mui-bar-nav" >
		 	<a class=" mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div  class="mui-title">幸运抽奖</div>
		 </header>
			<div class="titledd">你还有抽奖次数:<span class='cishu'>0次</span></div>
			<div class="draw">
				<div class="luckdraw" style="background-image: url(../image/nine.png);background-size: 100% 100%;">
					<div class="nei">
						<!-- <div class="neidan   active"   index="0">
							<div><img src="../image/gold.png" /></div>
							<div>2金币</div>
						</div> -->
						<!-- <div class="neidan" index="1">
							<div><img src="../image/gold.png" /></div>
							<div>2金币</div>
						</div>
						<div class="neidan" index="2">
							<div><img src="../image/lookmovie.png" /></div>
							<div>2金币</div>
						</div>
						<div class="neidan" index="3">
							<div><img src="../image/iphon.png" /></div>
							<div>2金币</div>
						</div>
						<div class="neidan" index="4">
							<div><img src="../image/gold.png" /></div>
							<div>2金币</div>
						</div>

						<div class="neidan" index="5">
							<div><img src="../image/iphon.png" /></div>
							<div>2金币</div>
						</div>
						<div class="neidan" index="6">
							<div><img src="../image/lookmovie.png" /></div>
							<div>2金币</div>
						</div>
						<div class="neidan" index="7">
							<div><img src="../image/thanks.png" /></div>
							<div>谢谢惠顾</div>
						</div> -->
				
							<!--开始抽奖 -->
						<div  class="neidan  startdraw">
							<p>开始抽奖</p>
							<p>(2元一次)</p>
						</div>
					</div>
				</div>
			</div>

			<!-- 轮播 -->

			<div class="lunbos">
				<div class="headline">
					<div class="right" id="rolls">
						<!-- <div>
							<div class="tii"><span>15388190344</span><span>里面结合原生广告文章吸引人，</span></div>
							<div class="tii"><span>15388190344</span><span>里面结合原生广告文章吸引人，</span></div>
						</div>

						<div>
							<div class="tii"><span>15388190111</span> <span>文章吸引人，里面结合原生广告</span></div>
							<div class="tii"><span>15388190111</span> <span>文章吸引人，里面结合原生广告</span></div>
						</div>


						<div>
							<div class="tii"><span>15388190222</span> <span>里面结合原生广告,文章吸引人</span></div>
							<div class="tii"><span>15388190222</span><span>里面结合原生广告文章吸引人，</span></div>
						</div> -->
						<!--增加第一个DOM节点，实现无缝滚动-->
						<!-- <div>
							<div class="tii"><span>15388190333</span><span>文章吸引人，里面结合原生广告</span> </div>
							<div class="tii"><span>15388190333</span><span>文章吸引人，里面结合原生广告</span> </div>
						</div> -->

					</div>
				</div>
			</div>


	
	
	    <!-- 抽奖图 -->
	
	<div  class="drawsss">  <div  style="background-image: url(../image/goulcoin.png);background-size: 100% 100% ; background-repeat: no-repeat;">完成以下任务，获得抽奖机会</div></div>
	
	     <!-- 抽奖提示 -->
		 <div class="tips">
			 <div>
				 <div class="tiphead"><div>内容</div><div>奖励次数</div><div></div></div>
				 <div class="xinfu">
                 <div class="tipheads"><div>分享一次</div> <div class="cishus">1</div><div><span class="spans fenxiang">前往</span> </div> </div> 
				 <div class="tipheads"><div>成为会员</div> <div class="cishus">1</div><div><span  class="spans huiyuan">前往</span> </div> </div>   
				 <div class="tipheads"><div>成为合伙人</div> <div class="cishus">1</div><div><span  class="spans hehuoren">前往</span> </div> </div>  
				 <div class="tipheads"><div>商城交易一次</div> <div class="cishus">1</div><div><span  class="spans shangchen"></span> </div> </div> 
				 </div>
			 </div>
		 </div>
		 
	
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script src="../js/coujiang.js"></script>
	<script type="text/javascript" charset="utf-8">
		
		
		mui.init({
				beforeback: function() {　　　　
						                          var list = plus.webview.currentWebview().opener();　　　　
						                          //refresh是A页面自定义事件
						                          mui.fire(list, 'refresh');
						                          //返回true,继续页面关闭逻辑
						                          return true;
						                      },
			
					
			
			})
		
		
		mui(document).on("tap",".mui-pull-left",function(){
			
					//获得列表界面的webview
					// var lists = plus.webview.currentWebview().opener();　　
					// //触发列表界面的自定义事件（refresh）,从而进行数据刷新
					// mui.fire(lists,'ddd');
					//返回true，继续页面关闭逻辑
					mui.back()
				
			
		})
		
		mui.plusReady(function() {
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			user = JSON.parse(user);
			mui.post(url+'/juyou/myprize/getprize',{token:user.token},function(res){
				if(res.code==200){
					$(".cishu").text(res.data.coujiang+'次');
					$(".startdraw").children('p').eq(1).text('('+res.data.suoxu+'金币一次)')
					var str = '';
					mui.each(res.data.jiangping,function(i,v){
						if(i==0){
							str+='<div class="neidan   active"   index="'+i+'">'+
										'<div><img src="'+v.tubiao+'" /></div>'+
										'<div>'+v.name+'</div>'+
									'</div>';
						}else{
							str+='<div class="neidan"   index="'+i+'">'+
										'<div><img src="'+v.tubiao+'" /></div>'+
										'<div>'+v.name+'</div>'+
									'</div>';
						}
					})
					$('.nei').prepend(str);
					$(".cishus").eq(0).text(res.data.fenxiang)
					$(".cishus").eq(1).text(res.data.huiyuan)
					$(".cishus").eq(2).text(res.data.hehuoren)
					$(".cishus").eq(3).text(res.data.jiaoyi)
					
					str = '';
					mui.each(res.data.huojiang,function(i,v){
						if(i%2==0){
							str +='<div>'+
							'<div class="tii"><span>'+v.user_name+'</span><span>获得奖品:'+v.name+'</span></div>';
						}else if(i%2==1){
							str+='<div class="tii"><span>'+v.user_name+'</span><span>获得奖品:'+v.name+'</span></div>'+
						'</div>';
						}
					})
					if((res.data.huojiang.length-1)%2==0){
						str+='</div>';
					}
					$("#rolls").append(str);
					var num = res.data.huojiang.length/2;
					
					// var newstr = $("#rolls").children('div').html();
					// newstr = '<div>'+newstr+'</div>';
					// $("#rolls").append(newstr);
					
					
					
					var height = $(document).height();
					$(".mui-content").css("height", height);
					
					// mui.plusReady(function () {
					//    mui(document).on("tap",".choose_xiangq",function(){
					//     var value=$(this).children("span").text();
					//     var  headimg=$(this).children("img").attr("src")
					//        var  nameid=$(this).children("span").attr("nameid")
					//     var web=plus.webview.currentWebview().opener();   //这个是父级返回页面的对象
					//     mui.fire(web,'cusRefresh',{
					//      backname:value,
					//      backsrc:headimg,
					//      backid:nameid
					//     })
					//     mui.back()
					//    }) 
					//    })
					
					
					//点击开始抽奖
					 var lottery = document.querySelector('.nei');
					  var ali =lottery.querySelectorAll('.neidan');
					  var i=0;  //转到哪个位置
					  var count=0; //转圈初始值
					  var totalCount = 9;//转动的总圈数
					var speed =500;//转圈速度，越大越慢
					var minSpeed =500;
					var timer;
					var isClick = true;
					var index = 4;//指定转到哪个奖品
					
					var  messge="";//抽中了哪个奖品
					 mui(".nei").on("tap",".startdraw",function(){
						 // MyCouJiang(4,function(i){
							//  console.log(i%8);
						 // })
						 // mui.alert('haha')
					   if(isClick){
						   mui.post(url+'/juyou/myprize/luck_draw',{token:user.token},function(res){
							   // mui.toast(res.msg);
							   if(res.code==200){
								   count= 0;
								   $(".cishu").text(res.data.ci+'次');
								                       //随机产生中奖位置
								   //                  index = Math.floor(Math.random()*arr.length+1);
								   totalCount = Math.ceil(Math.random()*2)+6;
								   
								   index = res.data.key+1;
								   messge=res.msg;
								   
								                       roll();
								                       isClick=false;
							   }else if(res.code==202){
								   
								   mui.confirm(res.msg,'提示',['取消','充值'],function (e) {
								   	if(e.index==1){
										mui.openWindow({
											url:'../sub5/huchongzhigold.html',
											id:'../sub5/huchongzhigold.html',
										})
									}
								   })
							   }
							   else{
								   mui.toast(res.msg);
							   }
							   
						   })
					                   
					  }
					 })	
					   
					 function roll(){
						 
						 //速度衰减
					 speed -=50;
					 if(speed<=50){
						speed=50 
					 }
					 
					  //每次调用去掉全部active类名
					  for(var j=0;j<ali.length;j++){
								ali[j].classList.remove("active")		
					  }
					  i++;
					  // 计算转圈次数
					  if(i>=ali.length-1){
						  i=0;
						  count++
					  }
					   
					  // 给选中的奖品添加
					  ali[i].classList.add('active');//添加变色类名
					
					     //满足转圈数和指定位置就停止
					        if(count>=totalCount&&(i+1)==index){
								
								
					            clearTimeout(timer);
					            isClick=true;
					            speed=minSpeed;
								
								setTimeout(function(){
									mui.each(ali,function(i,v){
										if(i==0){
											$(v).addClass('active');
										}else{
											$(v).removeClass('active');
										}
									})
								},1500)
								 
								// mui.alert(index)
								setTimeout(function(){
								   mui.confirm(messge,'提示',['取消','确认'],function (e) {
									   i = 0;
										// if(e.index==1){
										// 	window.location.reload();
										// }
									})
								},1500)
							
					        }else{
					            timer = setTimeout(roll,speed);//不满足条件时调用定时器
					            //最后一圈减速
					            if(count>=totalCount-1||speed<=50){
					                speed+=100;
					            }
					        }
							
							
							
					 }
					 
					 
					 
					 
					 // 轮播
					 var rolls = {
					 
					 	currentY: 54, //滚动的总距离
					 
					 	times: 0, //滚动一次的步长
					 
					 	many: 0, //滚动次数
					 
					 	MAX: Math.ceil(num), //滚动的总次数
					 
					 	STEP: 52, //滚动一次的总步长
					 
					 	ONCE: 20, //滚动一步的时间，注意ONCE*STEP<TIME
					 
					 	TIME: 3000, //滚动一次的时间间隔
					 
					 	INIT: function() {
					 
					 		setInterval(function() {
					 
					 			var container = document.getElementById("rolls");
					 
					 			if (rolls.many < rolls.MAX) {
					 
					 				var timer;
					 
					 				timer = setInterval(function() {
					 
					 					if (rolls.times < rolls.STEP) {
					 
					 						rolls.currentY--;
					 
					 						container.style.marginTop = rolls.currentY + 'px';
					 
					 						rolls.times++;
					 
					 					} else {
					 
					 						clearInterval(timer);
					 
					 						rolls.times = 0;
					 
					 					}
					 
					 				}, rolls.ONCE);
					 
					 				rolls.many++;
					 
					 
					 			} else {
					 
					 				rolls.many = 0;
					 
					 				rolls.currentY = 0;
					 
					 
					 				container.style.marginTop = rolls.currentY + 'px';
					 
					 			}
					 
					 		}, rolls.TIME);
					 
					 	},
					 
					 
					 
					 }
					 
					 rolls.INIT();
					 
					 mui('.tipheads').on('tap','.fenxiang',function(){
						 mui.openWindow({
						 	url:"generalize.html",
						 	id:"generalize.html",
						 })
					 })
					 mui('.tipheads').on('tap','.huiyuan',function(){
					 						 mui.openWindow({
					 						 	url:"huchongzhi.html",
					 						 	id:"huchongzhi.html",
					 						 })
					 })
					 mui('.tipheads').on('tap','.hehuoren',function(){
						mui.post(url+'/juyou/hehuo/getren',{token:user.token},function(res){
						 	if(res.data.user.hehuoren=='未申请'){
						 		mui.openWindow({
						 			url:"partner.html",
						 			id:"partner.html",
						 		})
						 	}else if(res.data.user.hehuoren=='已通过'){
						 		mui.openWindow({
						 			url:"subordinate.html",
						 			id:"subordinate.html",
						 		})
						 	}else{
						 		mui.openWindow({
						 			url:"partner.html",
						 			id:"partner.html",
						 		})
						 	}
						 })
					 })
		// 			 mui('.tipheads').on('tap','.shangchen',function(){
		// 			 
		// 			 	// var web=plus.webview.currentWebview().opener();   //这个是父级返回页面的对象
		// 				// var web = plus.webview.getWebviewById("index.html");
		// 				var web  = plus.webview.getWebviewById(plus.runtime.appid)
		// 		      	web.show("sub2.html");
		// // 			 	mui.fire(web,'refresh')
		// // 
		// // 			 	
		// // 			 	mui.back()
		// 			 })
					
				}else{
					mui.toast(res.msg);
				}
			})
			
			
			
			
			
			
		
			 
			 
			
			
			
			
			
		})
		
	</script>
</html>
